<#include "header.ftl">
<#include "common.ftl">
<#macro treeMenu menu>
			<ul class="treeview">
				<#list menu.tmenus as t>
					<#if (t.tmenus?size>0)>
						<li>${t.title}
						<@treeMenu menu=t></@treeMenu>
					<#else>
						<li><a id="${t["menuId"]}" href="#${t["menuId"]}" onclick="void show('${t.url!}')">${t.title}</a>
					</#if>
					</li>
				</#list>
			</ul>
</#macro>
<SCRIPT type="text/javascript">
	$(function () {
		$('body').layout();
		
		$(".treeMenu").hide();
		$(".treeMenu:first").show();
		
		$('#mainTabs').bind('tabsselect', function(event, ui) {
	  		$(".treeMenu").hide();
	  		$(ui.panel).show();
		});
		
		$('#mainTabs').tabs('select',0);
	});
	
	function createPanel(title,url)
	{
		
	}
	function show(url)
	{
		$("#center").html("");
		$("#center").append(url); 
	}
	
</SCRIPT>
<body>
<DIV id="center" class="ui-layout-center ">Center
	<P><A href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</A></P>
	<P>* Pane-resizing is disabled because ui.draggable.js is not linked</P>
	<P>* Pane-animation is disabled because ui.effects.js is not linked</P>
</DIV>
<DIV id="north" class="ui-layout-north">
	<div id="mainTabs" class="tabs" >
	<ul >
	<#list data as t>
			<li><a href="#${t["menuId"]}">${t["title"]!""}</a></li>
	</#list>
	</ul>
</div>
</DIV>
<DIV id="south" class="ui-layout-south ui-widget-content">South</DIV>
<DIV id="west" class="ui-layout-west">
	<#list data as t>
		<div id="${t["menuId"]}" class="treeMenu">
			<h4 class="ui-widget-header">${t.title}</h4>
			<@treeMenu  menu=t/>
		</div>
	</#list>
	
	<div class="ui-widget-content" id="userMenu">
		<h4 class="ui-widget-header">常用菜单</h4>
	</div>

</DIV>
</body>

